<template>
	<!-- 云存储 -->
	<view class="bg-white" :class="modalName ? 'prevents' : ''">
		<!-- 主体内容 -->
		<view class="padding">
			<!-- 标题 -->
			<view v-if="!isIntroduceDetail">
				<view class="text-xl text-primary">{{$t('JLink.groups.xmcCss')}}</view>
				<view class="text-primary text-sm margin-tb-xs">{{$t('JLink.describe.xmcCss.introduce')}}</view>
			</view>
			<!-- 支持开通的设备列表 -->
			<device-list v-if="!isIntroduceDetail" :supportDeviceObj="supportDeviceObj" @click="handleSelectDevice"></device-list>
			<!-- logo -->
			<image :src="'https://statics.xmcsrv.net/weixin/cloud/xmcCss/zh/logo.png'" style="width:100%;" mode="widthFix"></image>
			<!-- 广告 -->
			<ads :title="$t('JLink.describe.xmcCss.ads.title')" :list="adList" pathName="xmcCss"></ads>
			<channels-modal :modalName="modalName" :info="buttonMessage.channelMessage" @hideModal="hideModal"></channels-modal>

		</view>
		<!-- 按钮 -->
		<buttons v-if="buttonMessage.fail" :classifyId="classifyId" :message="buttonMessage.message" :channelMessage="buttonMessage.channelMessage"></buttons>
<!--		<view>{{ classifyId }} &#45;&#45; {{buttonMessage.message}} &#45;&#45; {{buttonMessage.channelMessage}}</view>-->
	</view>
</template>

<script>
import {getDevice} from './mixins'
import channelsModal from "../components/modal/channels"
import couponModal from "../components/modal/coupon"
import buttons from './module/buttons/buttons'
import ads from './module/ads/ads'
import deviceList from './module/deviceList/deviceList'
export default {
	mixins: [getDevice],
	props:{
		deviceInfo:{
			type:Object,
			default:()=>{
				return {
					modalName:null
				}
			}
		}
	},
	components: {
	   deviceList,
	   buttons,
	   ads,
	   couponModal,
	   channelsModal
	},
    data() {
		return {
			isIntroduceDetail:false,
			adList:[
				{col:3,list:[
					{url:1,title:this.$t('JLink.describe.xmcCss.ads.content.name1'),text:this.$t('JLink.describe.xmcCss.ads.content.text1')},
					{url:2,title:this.$t('JLink.describe.xmcCss.ads.content.name2'),text:this.$t('JLink.describe.xmcCss.ads.content.text2')},
					{url:3,title:this.$t('JLink.describe.xmcCss.ads.content.name3'),text:this.$t('JLink.describe.xmcCss.ads.content.text3')}
					]},
				{col:2,list:[
					{url:4,title:this.$t('JLink.describe.xmcCss.ads.content.name4'),text:this.$t('JLink.describe.xmcCss.ads.content.text4')},
					{url:5,title:this.$t('JLink.describe.xmcCss.ads.content.name5'),text:this.$t('JLink.describe.xmcCss.ads.content.text5')},
					]},
			],
		}
    },
    onLoad(opt) {

    },
		mounted(){
			if(this.deviceInfo){
				this.modalName = this.deviceInfo.modalName
				this.isIntroduceDetail = this.deviceInfo.isIntroduceDetail
			}
		},
		onShow(){
			const pointData={ code:'600401',eventName:'click_item_home_cloud' }
			this.$postPointData(pointData)
		},
    methods: {
		channelClick(){
			this.modalName = 'channelsModal'
		},
		hideModal(){
			this.modalName =''
		}
    }
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
